<template>
  <div class="login">
    <div class="content">
      <div class="bar">
        <div class="bar-left">
          <img src="../../../assets/img/common/back_white.svg" alt="" @click="back">
        </div>
      </div>
      <div class="main">
        <div class="logo">
          <img src="../../../assets/img/common/netmusic.svg" alt="">
        </div>
        <div class="bottom">
          <div class="bottom-top">
            <el-button @click="loginnow">手机号登录</el-button>
          </div>
          <div class="bottom-middle">
            <img src="../../../assets/img/common/email.svg" alt=""
              @click="mail_login">
          </div>
          <div class="bottom-bottom">
            <input type="checkbox" class="checkbox" name="agreement">
            <p>同意《用户协议》《隐私政策》《儿童隐私政策》</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Login",
        methods:{
            loginnow(){
              let isagree = document.getElementsByName('agreement')
                // console.log(isagree)
                // console.log(isagree[0].checked)
                if(isagree[0].checked){
                    this.$router.push('login/tellogin')
                }else {
                    this.$toast.show('请先同意用户协议!')
                }
            },
            mail_login(){
                let isagree = document.getElementsByName('agreement')
                // console.log(isagree)
                // console.log(isagree[0].checked)
                if(isagree[0].checked){
                    this.$router.push('login/MailLogin')
                }else {
                    this.$toast.show('请先同意用户协议!')
                }
            },
            back(){
                this.$router.back();
            }
        }
    }
</script>

<style scoped>
  .login{
    position: relative;
    z-index: 101;
  }

  .content{
    width: 100%;
    height: 100vh;
    /*top: -44px;*/
    position: absolute;
    background-color: #DB2C1F;
  }

  .bar{
    width: 100%;
  }

  .bar-left{
    width: 60px;
  }

  .bar-left img{
    margin-top: 15px;
    margin-left: 20px;
    width: 25px;
    height: 25px;
  }

  .main{
    width: 100%;
    height: calc(100vh - 44px);
    position: absolute;
  }

  .logo{
    border-radius: 42px;
    margin: 0 auto;
    width: 85px;
    height: 85px;
    margin-top: 100px;
    background-color: red;
  }

  .logo img{
    width: 80px;
    height: 80px;

  }

  .bottom{
    position: absolute;
    bottom: 30px;
    width: 100%;
  }

  .bottom-top{
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .bottom-top button{
    border-radius: 20px;
    height: 30px;
    width: 80%;
    color: #DB2C1F;
    font-size: 13px;
    border: none;
  }

  .bottom-middle{
    text-align: center;
    margin-top: 15px;
  }

  .bottom-middle img{
    width: 35px;
    height: 35px;
  }

  .bottom-bottom{
    width: 100%;
    text-align: center;
    margin-top: 15px;
  }

  .checkbox{
    margin-right: 10px;
    vertical-align: middle;
  }

  .bottom-bottom p{
    color: white;
    font-size: 13px;
    display: inline;
  }

</style>